<template>
	<view>
		<!-- 顶部滑动 tab 组件 -->
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @changeIndex="tabtap"></swiper-tab-head>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height: swiperHeight + 'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items, key) in newList" :key="key">
					<scroll-view scroll-y class="list" @scrolltolower="loadMore(key)">
						<template v-if="items.list.length>0">
							<!-- 图文列表 -->
							<block v-for="(item, index) in items.list" :key="index">
								<index-list :item="item" :index="index" @changeevent="updateData"></index-list>
							</block>
							<!-- 上拉加载 -->
							<load-more :loadText="items.loadText"></load-more>
						</template>
						<template v-else-if="!items.firstload">
							<view style="font-size: 50rpx;font-weight: bold;color:#CCCCCC;padding-top: 100rpx;" class="m-f-jcc">Loading ...</view>
						</template>
						<template v-else>
							<!-- 无内容默认 -->
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import indexList from '../../components/index/index-list.vue';
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import loadMore from '../../components/common/load-more.vue'
	import noThing from '../../components/common/no-thing.vue'
	export default {
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 0,
				tabBars: [],
				newList: [],
			}
		},
		components: {
			indexList,
			swiperTabHead,
			loadMore,
			noThing
		},
		onLoad() {
			// API -> 系统信息 -> 获取可使用窗口高度
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperHeight = height
				}
			})
			this.getNav()
			// 开启监听
			uni.$on('updateData', this.updateData)
		},
		// 介绍 -> 框架简介 -> 生命周期 -> 页面生命周期 -> 监听原生标题栏搜索输入框点击事件
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search'
			})
		},
		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			switch(e.index) {
				case 1:
					// 打开发布页面
					this.User.navigate({
						url: '../add-input/add-input?postclass=' + JSON.stringify(this.tabBars)
					}, 'navigateTo')
					break
			}
		},
		methods: {
			updateData(data) {
				switch(data.type) {
					case 'guanzhu':
					console.log('guanzhu')
					this.updateGuanZhu(data)
						break
					case 'support':
					this.updateSupport(data)
						break
				}
			},
			updateGuanZhu(data) { // 更新关注信息
				// 拿到对象
				console.log(data)
				this.newslist[this.tabIndex].list.forEach(item => {
					if(item.userid === data.userid) {
						item.isguanzhu = data.data
					}
				})
			},
			updateSupport(data) { // 更新顶踩数据状态
				// 拿到当前对象
				let obj = this.newList[this.tabIndex].list.find(value => {
					return value.id === data.post_id
				})
				if (!obj) return
				let oldindex = obj.infonum.index // 操作前的状态
				obj.infonum.index = (data.do == 'ding') ? 1 : 2 // 操作后的状态
				if (oldindex !== 0) { // 之前操作过
					oldindex == 1 ? obj.infonum.dingnum-- : obj.infonum.cainum--
				}
				if (obj.infonum.index !== 0) { // 当前操作
					obj.infonum.index == 1 ? obj.infonum.dingnum++ : obj.infonum.cainum++
				}
			},
			async getNav() { // 获取文章分类
				let [err, res] = await this.$http.get('/postclass')
				if (!this.$http.errorCheck(err, res)) return
				let list = res.data.data.list
				let arr = []
				let arr2 = []
				list.forEach(ele => {
					arr.push({
						id: ele.id,
						name: ele.classname
					})
					arr2.push({
						loadText: '上拉加载更多',
						page: 1,
						list: [],
						firstload: false
					})
				})
				this.tabBars = arr
				this.newList = arr2
				this.tabBars.length > 0 && this.getList()
			},
			async getList() { // 获取指定列表
				let url = `/postclass/${this.tabBars[this.tabIndex].id}/post/${this.newList[this.tabIndex].page}`
				let [err, res] = await this.$http.get(url, {}, {token: true})
				let error = this.$http.errorCheck(err, res, ()=> {
					this.newList[this.tabIndex].loadText = '上拉加载更多'
				}, ()=> {
					this.newList[this.tabIndex].loadText = '上拉加载更多'
				})
				if (!error) return
				let arr = []
				let list = res.data.data.list
				list.forEach(ele => {
					arr.push(this.__format(ele))
				})
				this.newList[this.tabIndex].list = this.newList[this.tabIndex].page > 1 ? this.newList[this.tabIndex].list.concat(arr) : arr
				this.newList[this.tabIndex].firstload = true
				if (list.length < 10) {
					this.newList[this.tabIndex].loadText = '没有更多数据了'
				} else {
					this.newList[this.tabIndex].loadText = '上拉加载更多'
				}
				return
			},
			__format(item) { // 格式转化
				return {
					userid: item.user.id,
					userpic: item.user.userpic,
					username: item.user.username,
					isguanzhu: !!item.user.fens.length,
					id: item.id,
					title: item.title,
					type:  'img', // img: 图文, video: 视频
					titlepic: item.titlepic,
					video: false,
					path: item.path,
					share: !!item.share,
					infonum: {
						index: (item.support.length>0) ? (item.support[0].type+1) : 0, // 0：没有操作；1：顶；2：踩；
						dingnum: item.ding_count,
						cainum: item.cai_count,
					},
					commentnum: item.comment_count,
					sharenum: item.sharenum,
				}
			},
			tabtap(index) { // 顶部滑块点击事件
				this.tabIndex = index
			},
			tabChange(e) { // 中间滑块滑动改变事件
				this.tabIndex = e.detail.current
				this.getList()
			},
			loadMore(index) { // 上拉加载
				if (this.newList[index].loadText !== '上拉加载更多') return
				// 修改状态
				this.newList[index].loadText = '加载中...'
				// 获取数据
				this.newList[this.tabIndex].page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
